<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>1</p>
    <p>2</p>
    <p>3</p>

    <script>

        // 防抖和节流  是为了解决高频率触发事件  ---  使用延时器

        //   节流：立flag  写延时器 ， 在一段时间内事件只会触发一次    onscroll 

        //   防抖: 一直点击  清除上一个延时器  只有最后一次点击会生效   onresize


        // this指向某一个对象

        // 循环事件绑定


        console.log(this);   // window


        function fn() {
            console.log(this);   // window 
        }

        fn()


        setTimeout(function(){
            console.log(this);    // window
        } , 0)


        document.onclick = function() {
            console.log(this);   // document
            console.log(document)
        }


        var oPs = document.querySelectorAll('p') ;
        // console.log(oPs);


        for(var i = 0 ; i < oPs.length ; i++) {
            oPs[i].onclick = function() {
                // console.log(i);  // 3
                console.log(oPs[i]);
                // oPs[i].style.color = 'red'    // 报错
                for(var j = 0 ; j < oPs.length ; j++) {
                    if(oPs[j] === this) {
                        this.style.color = 'red'
                    } else {
                        oPs[j].style.color = 'black'
                    }
                }
                
            }
        }



    </script>
    
</body>
</html>